<template>
  <div style="padding:20px;" id="app">
    <div class="panel panel-primary">
      <div class="align-center">
  <el-form ref="form"  label-width="120px">
    <el-form-item label="源头数据源">
      <el-select v-model="sourceinfo" placeholder="请选择数据源"  style="margin-left: -200px; width:400px"   @change="(val) => selectdb(val,1)" >
        <el-option  v-for="item in sourceinfolist" :label= "item.key" :key="item.value"  :value="item.value"  ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="源头db">
      <el-select v-model="sourcedb" placeholder="请选择db"  style="margin-left: -200px; width:400px"  @change="(val) => selecttable(val,1)" >
        <el-option  v-for="item in sourcedblist" :label= "item.key" :key="item.value" :value="item.value"  ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="源头table">
      <el-select v-model="sourcetable" placeholder="请选择table"  style="margin-left: -200px; width:400px"  >
        <el-option  v-for="item in sourcetablelist" :label= "item.key" :key="item.value" :value="item.value"  ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="抽取方式">
      <el-select v-model="extractType" placeholder="请选择抽取方式"  style="margin-left: -200px; width:400px" >
        <el-option  v-for="item in extractTypelist" :label= "item.key" :key="item.value" :value="item.value" ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="目的数据源">
      <el-select v-model="targetinfo" placeholder="请选择数据源"  style="margin-left: -200px; width:400px"  @change="(val) => selectdb(val,2)">
        <el-option  v-for="item in targetinfolist" :label= "item.key" :key="item.value" :value="item.value"  ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="目的db">
      <el-select v-model="targetdb" placeholder="请选择db"  style="margin-left: -200px; width:400px"  @change="(val) => selecttable(val,2)">
        <el-option  v-for="item in targetdblist" :label= "item.key" :key="item.value" :value="item.value"  ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="目的table">
      <el-select v-model="targettable" placeholder="请选择table"  style="margin-left: -200px; width:400px"  >
        <el-option  v-for="item in targettablelist" :label= "item.key" :key="item.value" :value="item.value"  ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item  style="margin-left: -120px;" >
      <el-button type="primary" @click="onSubmit">保存接入信息</el-button>
    </el-form-item>
  </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          name: "test",
          sourceinfo:1,
          sourceinfolist:[{"key":"mysql数据源1","value":1},{"key":"mysql数据源2","value":2}],
          sourcedb:'',
          sourcedblist:[],
          sourcetable:'',
          sourcetablelist:[],
          extractType:1,
          extractTypelist:[{"key":"全量","value":1},{"key":"增量","value":2}],
          targetinfo:1,
          targetinfolist:[],
          targetdb:'',
          targetdblist:[],
          targettable:'',
          targettablelist:[]
        }
      },
      methods: {
        onSubmit() {
          var _myvue = this
          console.log('submit!');
          this.$http.post('http://127.0.0.1:8091/dataAccessinfo/insertDataAccessinfo',
            {   "sourceinfoId":this.sourceinfo,
              "sourcedb":this.sourcedb,
              "sourcetable":this.sourcetable,
              "extractType":this.extractType,
              "targetinfoId":this.targetinfo,
              "targetdb":this.targetdb,
              "targettable":this.targettable,
            }
            ,{emulateJSON: true}).then((response) => {
            // if(response.bodyText = "success"){
            alert("添加成功")
            _myvue.$router.push({name:'dataaccesslistinfo',params:{}})

          });
          // }

        },

        selectdb(value,flag){
          console.log(value,flag)
          this.$http.post('http://127.0.0.1:8091/datasource/findAlldb',
            {
              id:value
            }
            ,{emulateJSON: true}).then((response) => {
            // if(response.bodyText = "success"){
            if(flag == 1){
              this.sourcedblist = response.body
            }else if (flag == 2){
              this.targetdblist = response.body
            }
          });
          console.log(value)

        },
        selecttable(value,flag){
          console.log(value,this.sourceinfo)
          let id = this.sourceinfo
          if(flag == 2){
            id = this.targetinfo
          }

          this.$http.post('http://127.0.0.1:8091/datasource/findAlltable',
            {
              id:id,
              dname:value
            }
            ,{emulateJSON: true}).then((response) => {
            // if(response.bodyText = "success"){
            if(flag == 1){
              this.sourcetablelist = response.body
            }else if (flag == 2){
              this.targettablelist = response.body
            }
          });
          console.log(value)

        }
      },
      created() {
        this.$http.post('http://127.0.0.1:8091/datasource/findAllDatainfo',
          {

          }
          ,{emulateJSON: true}).then((response) => {
          // if(response.bodyText = "success"){
          this. sourceinfolist = response.body
          this.targetinfolist = response.body
        });
      }
  }
</script>

<style type="text/css">
  .align-center{
    margin:0 auto;      /* 居中 这个是必须的，，其它的属性非必须 */
    width:1000px;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
    background:white;     /* 背景色 */
    text-align:center;  /* 文字等内容居中 */
  }
</style>
